import url from './../../api/Constance'

<template>
    <div class="kanban">
        <el-form :model="form" class="app-search" ref="searchForm">
            <el-input class="app-search-item" clearable placeholder="请输入关键字" size="medium"
                      style="width:220px;"
                      v-model="form.keywords"
            />
            <el-date-picker :picker-options="pickerOptions" class="app-search-item"
                            end-placeholder="订单日期-截止" range-separator="至" size="medium" start-placeholder="订单日期-开始"
                            style="margin-left: 10px"
                            type="daterange" unlink-panels v-model="form.orderTime" value-format="yyyy-MM-dd"
            />
            <el-date-picker :picker-options="pickerOptions" class="app-search-item"
                            end-placeholder="登陆日期-截止" range-separator="至" size="medium" start-placeholder="登陆日期-开始"
                            style="margin-left: 10px"
                            type="daterange" unlink-panels v-model="form.loginTime" value-format="yyyy-MM-dd"
            />
            <el-button @click="fetchData(1)" class="app-search-item" icon="el-icon-search" size="medium"
                       type="primary"
            >
                搜索
            </el-button>
        </el-form>

        <el-table :data="items" style="width: 100%">
            <el-table-column align="center" label="头像" prop="avatarUrl" width="70">
                <template slot-scope="scope">
                    <span v-if="scope.row.avatarUrl"><img :src="scope.row.avatarUrl" class="avatar" height="40px"
                                                          width="40px"></span>
                    <span v-else>未授权</span>
                </template>
            </el-table-column>
            <el-table-column label="昵称" prop="nickName">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.nickName || '未授权'}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="手机号码" prop="mobile">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.mobile || '未登记'}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="公司名称" prop="company">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.company}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单数" prop="orderCount">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.orderCount}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="订单总金额" prop="orderTotalPay">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.orderTotalPay | yuan}} 元</b>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :page-size="form.size" :total="form.total" @current-change="fetchData"
                           layout="prev, pager, next"
                           width="1000">
            </el-pagination>
        </div>
        <el-dialog :title="detailDialogTitle" :visible.sync="detailDialogShow" width="600px">
            <el-table :data="this.detailDialogItems" style="width: 100%">
                <el-table-column label="城市" prop="city">
                    <template slot-scope="scope">
                        <div class="template-name">
                            <b>{{scope.row.city}}</b>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="已售总数" prop="sellTotal">
                    <template slot-scope="scope">
                        <div class="template-name">
                            <b>{{scope.row.sellTotal}}</b>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="已租总数" prop="rentedTotal">
                    <template slot-scope="scope">
                        <div class="template-name">
                            <b>{{scope.row.rentedTotal}}</b>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>


<script>
    export default {
        name: 'AreaSummary',
        info: {},
        data() {
            return {
                form: {
                    page: 1,
                    size: 10,
                    total: 0,
                    keywords: '',
                    loginTime: '',
                    orderTime: '',
                    loginDtStart: '',
                    loginDtEnd: '',
                    orderDtStart: '',
                    orderDtEnd: ''
                },
                items: [],
                detailDialogTitle: '',
                detailDialogShow: false,
                detailDialogItems: [],
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end])
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end])
                        }
                    }]
                }
            }
        },
        methods: {
            fetchData(page) {
                if (page) {
                    this.form.page = page;
                }
                if (this.form.loginTime && this.form.loginTime.length === 2) {
                    this.form.loginDtStart = this.form.loginTime[0];
                    this.form.loginDtEnd = this.form.loginTime[1];
                } else {
                    this.form.loginDtStart = '';
                    this.form.loginDtEnd = '';
                }
                if (this.form.orderTime && this.form.orderTime.length === 2) {
                    this.form.orderDtStart = this.form.orderTime[0];
                    this.form.orderDtEnd = this.form.orderTime[1];
                } else {
                    this.form.orderDtStart = '';
                    this.form.orderDtEnd = '';
                }
                this.$fetch('/admin/client/list?page=' + this.form.page
                    + '&keywords=' + this.form.keywords
                    + '&loginDtStart=' + this.form.loginDtStart
                    + '&loginDtEnd=' + this.form.loginDtEnd
                    + '&orderDtStart=' + this.form.orderDtStart
                    + '&orderDtEnd=' + this.form.orderDtEnd
                ).then((response) => {
                    if (response.code === 0) {
                        this.items = response.data.records;
                        this.form.total = response.data.total
                    } else {
                        this.$message.error(response.errorMsg);
                    }
                });
            },
            detail(province) {
                this.$fetch('/admin/city/summary?page=' + this.form.page + '&province=' + province)
                    .then((response) => {
                        if (response.code === 0) {
                            this.detailDialogItems = response.data.records;
                            this.detailDialogTitle = province + '地区统计';
                            this.detailDialogShow = true
                        } else {
                            this.$message.error(response.errorMsg);
                        }
                    });
            }
        },
        mounted() {
            this.fetchData();
        }
    }
</script>

<style>
    .block {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-end;
        padding: 15px 30px;
    }

    .kanban {
        padding: 25px 25px;
    }
</style>
